<template>
	<u-popup mode="bottom" :border-radius="20" :popup="false" v-model.sync="value" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="popupClose" :z-index="uZIndex">
		<view class="title flex-bect"><u-icon name="close" @click="close"></u-icon><view class="flex-1">请选择取消订单的原因</view></view>
		<view v-for="(item, index) in reasonList" :key="index" class="flex-bect item" :class="{on: reasonId == item.id}" @click="reasonId = item.id">
			<view class="tit">{{item.title}}</view>
      <view class="radio flex-ct"><u-icon v-if="reasonId == item.id" name="checkmark" color="#fff" size="20"></u-icon></view>
		</view>
    
    <view class="btn" @click="submit">确定</view>
	</u-popup>
</template>

<script>
	export default {
		name: "cancel-reason",
		props: {
			// 点击遮罩是否可以关闭actionsheet
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx
			list: {
				type: Array,
				default () {
					// 如下
					// return [{
					// 	text: '确定',
					// 	color: '',
					// 	fontSize: ''
					// }]
					return [];
				}
			},
			// 顶部的提示文字
			tips: {
				type: Object,
				default () {
					return {
						text: '',
						color: '',
						fontSize: '26'
					}
				}
			},
			// 底部的取消按钮
			cancelBtn: {
				type: Boolean,
				default: true
			},
			// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
			safeAreaInsetBottom: {
				type: Boolean,
				default: false
			},
			// 通过双向绑定控制组件的弹出与收起
			value: {
				type: Boolean,
				default: false
			},
			// 弹出的顶部圆角值
			borderRadius: {
				type: [String, Number],
				default: 0
			},
			// 弹出的z-index值
			zIndex: {
				type: [String, Number],
				default: 0
			},
			// 取消按钮的文字提示
			cancelText: {
				type: String,
				default: '取消'
			}
		},
		computed: {
			// 顶部提示的样式
			tipsStyle() {
				let style = {};
				if (this.tips.color) style.color = this.tips.color;
				if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx';
				return style;
			},
			// 操作项目的样式
			itemStyle() {
				return (index) => {
					let style = {};
					if (this.list[index].color) style.color = this.list[index].color;
					if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx';
					// 选项被禁用的样式
					if (this.list[index].disabled) style.color = '#c0c4cc';
					return style;
				}
			},
			uZIndex() {
				// 如果用户有传递z-index值，优先使用
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
    data() {
      return {
        reasonList:[],
        reasonId:''
      }
    },
		created() {
		  this.$api.activityCancelReasonApi().then(res=>{
		    this.reasonList = res.data;
		    console.log('reasonList---', this.reasonList)
		  })
		},
    methods: {
			// 点击取消按钮
			close() {
				// 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
				// 这是一个vue发送事件的特殊用法
				this.popupClose();
				this.$emit('close');
			},
			// 弹窗关闭
			popupClose() {
				this.$emit('input', false);
			},
      submit(){
        this.$emit('confirm', this.reasonId)
        this.$emit('input', false);
      },
		}
	}
</script>

<style lang="scss" scoped>
.title{text-align: center;  padding: 40rpx 70rpx 40rpx 30rpx; color: #000; font-size: 30rpx;}
.item{height: 88rpx; padding: 0 33rpx; border-bottom: 1px solid #EEEEEE;}
.radio{width: 32rpx; height: 32rpx; border-radius: 50%; border: 2px solid #AAAAAA;}
.on{
  .radio{background-color: #05B196; border-color: #05B196;}
}
.btn{
  width: 92%; display: flex; align-items: center; justify-content: center; background-color: #05B196; color: #fff; font-size: 30rpx; height: 88rpx; border-radius: 50rpx; margin: 30rpx auto;
}
</style>
